<template>
  <div>
    <div class="wage-set-group">
      <div class="top-wrapper">
        <div class="wage-top-title">使用指南</div>
        <div class="wage-top-explain">
          <div>1、计税规则，由系统统一提供。请到【薪资组】关联人员，计薪规则及适用的个税规则。</div>
          <div>2、核算工资时，按员工适用的个税方案，自动计算出当月个税金额。</div>
        </div>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :scroll="{ x: 950 }" :data-source="ruleList" row-key="id" :loading="loading" :pagination="false">
        <span slot="type" slot-scope="text">{{ text === 3 ? "-" : taxRule[text - 1] }}</span>
        <span slot="isCalculate" slot-scope="text">{{ text ? "是" : "否" }}</span>
        <span slot="threshold" slot-scope="text">{{ text === 0 ? "-" : `${text}/月` }}</span>
        <span slot="taxResult" slot-scope="text">{{ text ? text : "-" }}</span>
        <span slot="action" slot-scope="text, record" style="margin-left: -15px">
          <a-button type="link" @click="enterDetail(record.id, record.type)">
            {{ record.type === 1 ? "编辑" : "查看" }}
          </a-button>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import { deleteSalaryGroup, getRules } from "@/api/wages/set";
const columns = [
  {
    title: "方案名称",
    dataIndex: "name",
    key: "name",
    width: 200
  },
  {
    title: "个税类型",
    dataIndex: "type",
    key: "type",
    width: 200,
    scopedSlots: { customRender: "type" }
  },
  {
    title: "是否计税",
    dataIndex: "isCalculate",
    key: "isCalculate",
    width: 100,
    scopedSlots: { customRender: "isCalculate" }
  },
  {
    title: "起征点",
    key: "threshold",
    dataIndex: "threshold",
    width: 150,
    scopedSlots: { customRender: "threshold" }
  },
  {
    title: "结果小数位",
    key: "taxResult",
    dataIndex: "taxResult",
    width: 200,
    scopedSlots: { customRender: "taxResult" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 100
  }
];
const monthRule = ["按正式/调薪后的工资计算", "按试用期/调薪前的工资计算", "按转正/调薪前后的工资混合计算"];
const taxRule = ["工资薪金所得", "劳动报酬所得", "不计税"];
export default {
  data() {
    return {
      deleteId: "",
      ruleList: [],
      companyId: "",
      columns,
      groupVisible: false,
      loading: true,
      monthRule,
      taxRule
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },

  methods: {
    editClass(id) {
      this.$router.push({
        path: "/wages/set/group/add",
        query: {
          isEdit: 1,
          groupId: id
        }
      });
    },
    handleDelete() {
      deleteSalaryGroup(this.deleteId)
        .then((res) => {
          this.groupVisible = false;
          this.$message.success("删除成功");
          this.getData();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    enterDetail(id, type) {
      if (type === 1) {
        this.$router.push({
          path: "/wages/set/rule/edit",
          query: {
            taxRuleId: id
          }
        });
      } else {
        this.$router.push({
          path: "/wages/set/rule/detail",
          query: {
            taxRuleId: id
          }
        });
      }
    },
    getData() {
      this.loading = true;
      const data = {
        companyId: this.companyId
      };
      getRules(data)
        .then((res) => {
          this.loading = false;
          this.ruleList = res.data;
          this.ruleList.forEach((item, index) => {
            if (item.empInfoList && item.empInfoList.length > 0) {
              item.range = `${item.empInfoList[0].name}等${item.empInfoList.length}名员工`;
            } else item.range = "";
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);

          this.loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.wage-set-group {
  .top-wrapper {
    margin: 0 0 24px 0;
  }
  .wage-top-title {
    color: #252525;
    font-size: 16px;
    margin-top: 12px;
  }
  .wage-top-explain {
    color: #999999;
    font-size: 14px;
    margin-top: 12px;
    line-height: 24px;
  }
}
</style>
